<template>
	<view class="wrapper m-wrapper">
		<view class="form-card">
			<view class="form-row flex-center">
				<view class="form-label">姓名 <text class="text-danger">*</text></view>
				<view class="flex_bd">
					<input type="text" placeholder="" disabled v-model="name" class="form-control">
				</view>
			</view>
			<view class="form-row flex-center">
				<view class="form-label">性别 <text class="text-danger">*</text></view>
				<view class="flex_bd flex-center flex-end">
					<u-radio-group v-model="value" >
					<u-radio 
					@change="radioChange" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
					:disabled="item.disabled"
					>
					{{item.name}}
					</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-row flex-center">
				<view class="form-label">手机号</view>
				<view class="flex_bd">
					<input type="text" placeholder-style="color:#d0d1d4" v-model="nphone" placeholder="请输入手机号" value="" class="form-control">
				</view>
			</view>
			<view class="form-row flex-center">
				<view class="form-label">身份证号</view>
				<view class="flex_bd">
					<input type="text" placeholder-style="color:#d0d1d4" v-model="ncard" placeholder="请输入身份证号" value="" class="form-control">
				</view>
				<view class="iconfont icon-saoma"></view>
			</view>
			<view class="form-row flex-center">
				<view class="form-label">床号 <text class="text-danger">*</text></view>
				<view class="flex_bd">
					<input type="text" placeholder-style="color:#d0d1d4" v-model="bnumber" placeholder="请选择床号" value="" class="form-control">
				</view>
				<view @click="show = true" class="iconfont icon-chuang"></view>
			</view>
			<view class="form-row flex-center">
				<view class="form-label">住院号 <text class="text-danger">*</text></view>
				<view class="flex_bd">
					<input type="text" placeholder-style="color:#d0d1d4" v-model="znumber" placeholder="请输入住院号" value="" class="form-control">
				</view>
			</view>
		</view>
		<view class="form-tip"> * 为必填项</view>
		<view class="l-footer">
			<u-button @click="" type="primary" :custom-style="btnStyle">立即提交</u-button>
		</view>
		<!-- 床号 -->
		<u-popup v-model="show" mode="center" width="690" border-radius="12">
			<view class="b-popup">
				<view class="b-popup_hd">床位选择</view>
				<view class="b-search flex-center">
					<view class="flex_bd">
						<u-search placeholder="请输入床位" v-model="keyword" :show-action="false"></u-search>
					</view>
					<button class="btn-search" type="default">搜索</button>
				</view>
				<view class="b-popup_bd">
					<u-row gutter="30">
						<u-col span="4" v-for="(item,index) in bedlist" :key="item">
							<view class="bed-card" @click="cur=index" :class="{active:cur==index}">
								<view class="b-title">{{item.title}}</view>
								<view class="b-item">类型：***</view>
								<view class="iconfont icon-beds"></view>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="b-popup_ft flex-center justify-center">
					<button type="default" @click="show = false" class="btn btn-solid">取消</button>
					<button type="default" class="btn btn-primary">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			keyword:'',
			name:'林生斌',
			nphone:'',
			ncard:'',
			bnumber:'',
			znumber:'',
			btnStyle: {
				background:'#009fe8',
				color: '#ffffff',
				height:'98rpx',
				fontSize:'30rpx',
				borderRadius:"90rpx"
			},
			list: [
				{
					name: '男',
					disabled: false
				},
				{
					name: '女',
					disabled: false
				},
				{
					name: '保密',
					disabled: false
				}
			],
			value: '男',
			bedlist:[
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+3床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				},
				{
					title:'+4床',
					item:'类型：***'
				}
			],
			cur: 0 //默认选中第一个tab
		};
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		}
	}
};
</script>

<style lang="scss">
	.b-popup{
		padding:30rpx;
		.b-popup_hd{
			text-align: center;
			margin-bottom: 30rpx;
			font-size: 38rpx;
			color: #373b4f;
		}
	}
	.b-popup_ft .btn{
		width: 160rpx;
		height: 60rpx;
		margin: 0 10px;
		line-height: 60rpx;
		background-color: #FFFFFF;
		border-radius: 40px;font-size: 28rpx;
		border: 1px solid #009fe8;
	}
	.b-popup_ft .btn-primary{
		background-color: #009fe8;
		color: #FFFFFF;
	}
	.b-popup_ft .btn-solid{
		border-color: #009fe8;
		color: #009fe8
	}
	.form-control{
		font-size: 28rpx;
	}
	
	
	
	
	
	.b-search{
		margin-bottom: 30rpx;
		.btn-search{
			height: 60rpx;
			line-height: 60rpx;
			margin-left: 30rpx;
			width: 116rpx;
			background-color: #009fe8;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 40px;
		}
	}
	.b-popup_bd{
		margin: 0 -15rpx;
	}
	.bed-card{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		border-radius: 12rpx;
		background-color: #e5effa;
		color: #373b4f;
		height: 130rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		.b-item{
			opacity: .6;
			font-size: 24rpx;
		}
		.b-title{
			font-size: 30rpx;
			margin-bottom: 10rpx;
		}
		.icon-beds{
			position: absolute;
			right: -30rpx;
			bottom: 0;
			color: #cfdff1;
			line-height: 1;
			font-size: 60rpx;
		}
	}
	.bed-card.active{
		color: #FFFFFF;
		background:#009fe8
	}
	.bed-card.active .iconfont{
		color: #1aa9ea;
	}
	.l-footer{
		padding: 0 60rpx;
		margin-top: 130rpx;
	}
	.m-wrapper{
		padding:30rpx;
	}
	.form-card{
		padding: 0 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	.form-tip{
		padding: 20rpx;
		font-size: 24rpx;
		color: #fc2932;
	}
	.form-row{
		padding: 32rpx 0;
		border-bottom: 1px solid #eeeeee;
	}
	.form-row:last-child{
		border-bottom: 0;
	}
	.form-row .form-control{
		text-align: right;
	}
	.form-row .iconfont{
		margin-left: 20rpx;
		font-size: 32rpx;
		color: #009fe8;
	}
	
	.form-label{
		font-size: 30rpx;
	}
	.text-danger{
		color: #fc2932;
	}
	.flex-end{
		justify-content: flex-end;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>
